<template>
    <view :data-theme="globPrimary">
        <u-navbar title="设置支付密码"></u-navbar>
        <!-- 第一步 -->
        <view class="password-view" v-show="show == 1">
            <u-form :model="form" ref="uForm" label-width="152">
                <u-form-item label="手机号">
                    <view class="text">{{ userInfo.phone | formatMask }}</view>
                </u-form-item>
                <u-form-item label="验证码" prop="verify">
                    <u-input
                        placeholder="请输入验证码"
                        v-model="form.verify"
                        type="text"
                    ></u-input>
                    <button
                        slot="right"
                        @click="handleGetCode"
                        :disabled="codeType"
                        :class="[codeType ? 'code-disabled' : '']"
                        class="u-reset-button verify-btn"
                        :style="{ color: globPrimaryColor }"
                    >
                        {{ codeTips }}
                    </button>
                </u-form-item>
            </u-form>
            <edu-button
                type="primary"
                :disabled="oneDisabled"
                @click="handleSubmitOne"
                :custom-style="customStyle"
                >下一步</edu-button
            >
        </view>

        <!-- 第二步 -->
        <view class="input-view u-padding-top-40" v-show="show == 2">
            <view class="phone">为帐号{{ userInfo.phone | formatMask }}</view>
            <view class="title">设置6位数字支付密码</view>
            <view class="u-flex" style="display: flex; justify-content: center"
                ><u-message-input
                    :maxlength="6"
                    :dot-fill="true"
                    :breathe="false"
                    inactiveColor="#303133"
                    @finish="handleSubmitTwo"
                ></u-message-input
            ></view>
        </view>

        <!-- 第三步 -->
        <view class="input-view padding-top-90" v-show="show == 3">
            <view class="title">再次输入支付密码</view>
            <view
                class="u-flex margin-bottom-120"
                style="display: flex; justify-content: center"
            >
                <u-message-input
                    :maxlength="6"
                    :dot-fill="true"
                    :breathe="false"
                    inactiveColor="#303133"
                    @finish="handleVerifyPwd"
                ></u-message-input>
            </view>
            <edu-button
                @click="handleSubmitThree"
                type="primary"
                :disabled="threeDisabled"
                >完成</edu-button
            >
        </view>
        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import md5Libs from "@/uview-ui/libs/function/md5";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            show: 1,
            password: "",
            rePassword: "",
            threeDisabled: true,
            form: {
                verify: "",
            },
            codeTips: "",
            codeType: false,
            rules: {
                verify: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: ["change", "blur"],
                    },
                ],
            },
            customStyle: {
                marginTop: "80rpx",
            },
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
        oneDisabled() {
            return this.form.verify == "" ? true : false;
        },
    },
    options: { styleIsolation: "shared" },
    methods: {
        // 第一步提交
        handleSubmitOne() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.$edu.api
                        .createUserBalancePwdVerify({
                            phone: this.userInfo.phone,
                            code: this.form.verify,
                        })
                        .then((res) => {
                            this.show = 2;
                            this.$u.toast(res.msg);
                        });
                }
            });
        },
        // 第二步提交
        handleSubmitTwo(val) {
            this.show = 3;
            this.password = val;
        },
        // 第二次密码输入完成
        handleVerifyPwd(val) {
            this.rePassword = val;
            this.threeDisabled = false;
        },
        // 第三步提交
        handleSubmitThree() {
            if (this.password !== this.rePassword) {
                this.$u.toast("两次输入的密码不一致");
                return;
            }
            this.$edu.api
                .createUserBalancePwd({
                    password: md5Libs.md5(this.rePassword),
                    // #ifdef MP-WEIXIN
                    phone: this.userInfo.phone,
                    code: this.form.verify,
                    // #endif
                })
                .then((res) => {
                    this.$refs.uToast.show({
                        title: res.msg,
                        back: true,
                    });
                    this.$store.dispatch("user/setUserInfo", {
                        need_set_paypwd: 0,
                    });
                });
        },
        // 获取验证码
        handleGetCode() {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({
                        phone: this.userInfo.phone,
                        type: "bpwd",
                    })
                    .then((res) => {
                        this.$u.toast(res.msg);
                        this.$refs.uCode.start();
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.codeType = true;
        },
        // 倒计时结束
        codeEnd() {
            this.codeType = false;
        },
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>

<style lang="scss" scoped>
.padding-top-90 {
    padding-top: 90rpx;
}
.margin-bottom-120 {
    margin-bottom: 120rpx;
}
.password-view {
    min-height: calc(100vh - 44px);
    background-color: #fff;
    padding: 0 30rpx;

    .text {
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-tips-color;
    }
    .verify-btn {
        font-size: 28rpx;
        font-weight: 400;
        @include text-color();
    }
    .code-disabled {
        @include text-color-disabled();
        background-color: transparent;
    }
}
.input-view {
    min-height: calc(100vh - 44px);
    background-color: #fff;
    padding-left: 30rpx;
    padding-right: 30rpx;
    .phone {
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-tips-color;
        text-align: center;
        margin-bottom: 10rpx;
    }
    .title {
        font-size: 36rpx;
        font-weight: 400;
        color: $edu-main-color;
        text-align: center;
        margin-bottom: 54rpx;
    }
    .u-char-box {
        margin-left: auto;
        margin-right: auto;
    }
    /deep/.u-char-flex {
        border-radius: 8rpx;
        border: 1px solid #b7bac1;
        .u-char-item {
            margin: 0;
        }
        .u-box {
            border: 0;
            border-radius: 0;
        }
        view + view {
            .u-box:after {
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                border-left: 1px solid #b7bac1;
                z-index: 2;
            }
        }
    }
}
</style>
